<template>
  <div>
    <ul class="operate">
      <li
        @click="
          copy();
          paste();
        "
      >
        <span>复制</span>
      </li>
      <el-tooltip
        :enterable="false"
        effect="dark"
        content="图层"
        placement="bottom"
      >
        <el-dropdown
          :hide-on-click="false"
          @command="selectZindex"
          size="medium"
          trigger="click"
        >
          <li id="toolbar-sort" class="tools-icon-wrap tools-sort icon-btn">
            <span class="icon layer"></span>
          </li>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in getZindexList()"
              :key="index"
              :disabled="!item.enabled"
              :command="item.fun"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-tooltip>
      <el-tooltip
        :enterable="false"
        effect="dark"
        content="透明度"
        placement="bottom"
      >
        <el-popover placement="bottom" width="300" trigger="click">
          <el-row>
            <el-col :span="5" style="line-height:38px">
              <span>透明度</span>
            </el-col>
            <el-col :span="19">
              <el-slider
                v-model="selectedObj.opacity"
                :min="0"
                :max="1"
                :step="0.1"
                show-input
                :show-input-controls="false"
                input-size="mini"
                @input="selectOpacity"
              >
              </el-slider>
            </el-col>
          </el-row>
          <li
            slot="reference"
            id="toolbar-opacity"
            class="tools-icon-wrap tools-opacity icon-btn"
          >
            <span class="icon opacity"></span>
          </li>
        </el-popover>
      </el-tooltip>
      <el-tooltip
        :enterable="false"
        effect="dark"
        content="翻转"
        placement="bottom"
      >
        <el-dropdown
          :hide-on-click="false"
          @command="selectScale"
          size="medium"
          trigger="click"
        >
          <li
            id="toolbar-reverse"
            class="tools-icon-wrap tools-reverse icon-btn"
          >
            <span class="icon reverse"></span>
          </li>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="z">纵向翻转</el-dropdown-item>
            <el-dropdown-item command="h">横向翻转</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-tooltip>
      <el-tooltip
        :enterable="false"
        effect="dark"
        content="投影"
        placement="bottom"
      >
        <li class="tools-icon-wrap tools-shadow icon-btn">
          <span class="icon shadow"></span>
        </li>
      </el-tooltip>
      <el-tooltip
        :enterable="false"
        effect="dark"
        content="点我锁定"
        placement="bottom"
      >
        <li
          :class="
            'tools-icon-wrap icon-btn tools-lock ' +
              (this.selectedObj.lockMovementX ? 'active' : '')
          "
          @click="selectEvent"
        >
          <span
            class="
              icon lock 
            "
          ></span>
        </li>
      </el-tooltip>
      <el-tooltip
        :enterable="false"
        effect="dark"
        content="删除"
        placement="bottom"
      >
        <li class="tools-icon-wrap icon-btn tools-del" @click="del(selectObj);">
          <span class="icon delete"></span>
        </li>
      </el-tooltip>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    selectedObj: {}
  },
  computed: {
    ...mapGetters(["canvas", "undoList", "redoList"])
  },
  data() {
    return {
      toumingdu: 100
    };
  },
  created() {},
  mounted() {},
  methods: {
    ...mapActions(["copy", "paste", "zhiding", "saveState", "del"]),
    bringForward() {
      this.selectedObj.bringForward();
      this.zhiding();
      this.canvas.requestRenderAll();
    },
    sendBackwards() {
      this.selectedObj.sendBackwards();
      this.zhiding();
      this.canvas.requestRenderAll();
    },
    sendToBack() {
      this.selectedObj.sendToBack();
      this.zhiding();
      this.canvas.requestRenderAll();
    },
    bringToFront() {
      this.selectedObj.bringToFront();
      this.zhiding();
      this.canvas.requestRenderAll();
    },
    selectEvent() {
      //this.selectedObj.evented = !this.selectedObj.evented;
      //this.selectedObj.hasControls = this.selectedObj.evented;
      //this.selectedObj.transparentCorners = this.selectedObj.evented;
      if (this.selectedObj.lockMovementX) {
        this.selectedObj.lockMovementX = false;
        this.selectedObj.lockMovementY = false;
        this.selectedObj.lockRotation = false;
        this.selectedObj.lockScalingX = false;
        this.selectedObj.lockScalingY = false;
        this.selectedObj.hasControls = true;
      } else {
        this.selectedObj.lockMovementX = true;
        this.selectedObj.lockMovementY = true;
        this.selectedObj.lockRotation = true;
        this.selectedObj.lockScalingX = true;
        this.selectedObj.lockScalingY = true;
        this.selectedObj.hasControls = false;
      }
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },
    selectZindex(cmd) {
      //执行方法
      this[cmd]();
      this.saveState();
    },
    selectScale(cmd) {
      if (cmd == "z") {
        this.selectedObj.set({
          scaleX: -this.selectedObj.scaleX
        });
      }
      if (cmd == "h") {
        this.selectedObj.set({
          scaleY: -this.selectedObj.scaleY
        });
      }

      this.canvas.requestRenderAll();
      this.saveState();
    },
    selectOpacity(value) {
      this.selectedObj.opacity = value;
      this.zhiding();
      this.canvas.requestRenderAll();
    },
    getZindexList() {
      let list = this.canvas._objects;
      //查找对应的索引
      let index = list.indexOf(this.selectedObj);

      let arr = [];

      arr.push({
        name: "上移一层",
        enabled: index < list.length - 2,
        fun: "bringForward"
      });
      arr.push({ name: "下移一层", enabled: index > 1, fun: "sendBackwards" });
      arr.push({
        name: "置顶图层",
        enabled: index < list.length - 2,
        fun: "bringToFront"
      });
      arr.push({ name: "置底图层", enabled: index > 1, fun: "sendToBack" });

      return arr;
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../styles/centerPanel/wordcss.less";
</style>
